<!DOCTYPE html> 
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Single page template</title> 
    <link rel="stylesheet" href="lib/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="lib/jquery/jquery-1.7.2.js"></script>
    <script src="lib/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <script type="text/javascript">
	    var categoryData = {
		    animals: {
		        name: "Animals",
		        description: "All your favorites from aardvarks to zebras.",
		        items: [
		            {
		                name: "Pets"
		            },
		            {
		                name: "Farm Animals"
		            },
		            {
		                name: "Wild Animals"
		            }
		        ]
		    },
		    colors: {
		        name: "Colors",
		        description: "Fresh colors from the magic rainbow.",
		        items: [
		            {
		                name: "Blue"
		            },
		            {
		                name: "Green"
		            },
		            {
		                name: "Orange"
		            },
		            {
		                name: "Purple"
		            },
		            {
		                name: "Red"
		            },
		            {
		                name: "Yellow"
		            },
		            {
		                name: "Violet"
		            }
		        ]
		    },
		    vehicles: {
		        name: "Vehicles",
		        description: "Everything from cars to planes.",
		        items: [
		            {
		                name: "Cars"
		            },
		            {
		                name: "Planes"
		            },
		            {
		                name: "Construction"
		            }
		        ]
		    }
		};
    	// Load the data for a specific category, based on
		// the URL passed in. Generate markup for the items in the
		// category, inject it into an embedded page, and then make
		// that page the current active page.
		function showCategory( urlObj, options )
		{
		    var categoryName = urlObj.hash.replace( /.*category=/, "" ),
		
		        // Get the object that represents the category we
		        // are interested in. Note, that at this point we could
		        // instead fire off an ajax request to fetch the data, but
		        // for the purposes of this sample, it's already in memory.
		        category = categoryData[ categoryName ],
		
		        // The pages we use to display our content are already in
		        // the DOM. The id of the page we are going to write our
		        // content into is specified in the hash before the '?'.
		        pageSelector = urlObj.hash.replace( /\?.*$/, "" );
		
		    if ( category ) {
		        // Get the page we are going to dump our content into.
		        var $page = $( pageSelector ),
		
		            // Get the header for the page.
		            $header = $page.children( ":jqmData(role=header)" ),
		
		            // Get the content area element for the page.
		            $content = $page.children( ":jqmData(role=content)" ),
		
		            // The markup we are going to inject into the content
		            // area of the page.
		            markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
		
		            // The array of items for this category.
		            cItems = category.items,
		
		            // The number of items in the category.
		            numItems = cItems.length;
		
		        // Generate a list item for each item in the category
		        // and add it to our markup.
		        for ( var i = 0; i < numItems; i++ ) {
		            markup += "<li>" + cItems[i].name + "</li>";
		        }
		        markup += "</ul>";
		
		        // Find the h1 element in our header and inject the name of
		        // the category into it.
		        $header.find( "h1" ).html( category.name );
		
		        // Inject the category items markup into the content element.
		        $content.html( markup );
		
		        // Pages are lazily enhanced. We call page() on the page
		        // element to make sure it is always enhanced before we
		        // attempt to enhance the listview markup we just injected.
		        // Subsequent calls to page() are ignored since a page/widget
		        // can only be enhanced once.
		        $page.page();
		
		        // Enhance the listview we just injected.
		        $content.find( ":jqmData(role=listview)" ).listview();
		
		        // We don't want the data-url of the page we just modified
		        // to be the url that shows up in the browser's location field,
		        // so set the dataUrl option to the URL for the category
		        // we just loaded.
		        options.dataUrl = urlObj.href;
		        // Now call changePage() and tell it to switch to
		        // the page we just modified.
		        $.mobile.changePage( $page, options );
		    }
		}
    	
    </script>
</head> 

<body> 

<div data-role="page">

    <div data-role="header" data-position="fixed">
        <h1>start</h1>
        <div data-role="navbar" data-iconpos="left">
	        <ul>
	        	<li><a href="start.html" data-icon="home">home</a></li>
	        	<li><a href="start.html" data-icon="home">home</a></li>
	        	<li><a href="start.html" data-icon="home">home</a></li>
	        	<li><a href="start.html" data-icon="home">home</a></li>
	        </ul>
        </div>
    </div><!-- /header -->

    <div data-role="content">   
    	<ul data-role="listview" data-theme="a" data-inset="true">
		    <li data-icon="plus">
		    	<a href="add_item.html" data-ajax="true">add item</a>
		    </li>
		    <li data-icon="info"><a href="#">Notices</a></li>
			<li data-icon="alert"><a href="#">Alerts</a></li>
			<li data-icon="false"><a href="#">No icon</a></li>
		</ul>
		<h2>Select a Category Below:</h2>
	    <ul data-role="listview" data-inset="true">
	        <li><a href="#category-items?category=animals">Animals</a></li>
	        <li><a href="#category-items?category=colors">Colors</a></li>
	        <li><a href="#category-items?category=vehicles">Vehicles</a></li>
	    </ul>
    </div><!-- /content -->
    
    <div data-role="footer" data-position="fixed">
        <h4>Footer content</h4>
    </div><!-- /footer -->
    
</div><!-- /page -->

<div data-role="page" id="category-items">

    <div data-role="header" data-position="fixed">
        <h1>start</h1>
        <div data-role="navbar" data-iconpos="left">
            <ul>
                <li><a href="start.html" data-icon="home">home</a></li>
                <li><a href="start.html" data-icon="home">home</a></li>
                <li><a href="start.html" data-icon="home">home</a></li>
                <li><a href="start.html" data-icon="home">home</a></li>
            </ul>
        </div>
    </div><!-- /header -->

    <div data-role="content">   
    </div><!-- /content -->
    
    <div data-role="footer" data-position="fixed">
        <h4>Footer content</h4>
    </div><!-- /footer -->
    
</div><!-- /page -->
<script type="text/javascript">
	
// Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function( e, data ) {
    // We only want to handle changePage() calls where the caller is
    // asking us to load a page by URL.
    if ( typeof data.toPage === "string" ) {

        // We are being asked to load a page by URL, but we only
        // want to handle URLs that request the data for a specific
        // category.
        var u = $.mobile.path.parseUrl( data.toPage ),
            re = /^#category-item/;

        if ( u.hash.search(re) !== -1 ) {

            // We're being asked to display the items for a specific category.
            // Call our internal method that builds the content for the category
            // on the fly based on our in-memory category data structure.
            showCategory( u, data.options );

            // Make sure to tell changePage() we've handled this call so it doesn't
            // have to do anything.
            e.preventDefault();
        }
    }
});
</script>
</body>
</html>